<template>
	<view class="" style="background-color: #F8F8F8;">
		<view class="nav-back">
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>
		
		<view class="content-box" style="background-color: #fff;">
			<view class="time-top">
				<view @click="titleChange(1)" :class="num == 1 ? 'title-font choose':'title-font'">服务</view>
				<view @click="titleChange(2)" :class="num == 2 ? 'title-font choose':'title-font'">服务人员</view>
			</view>
		</view>
		<view v-if="fwList.length == 0 && num == 1" class="kong-box">
			<uv-empty mode="" text="暂时没有收藏的服务~" icon="/static/image/kong-start.png"></uv-empty>
		</view>
		<view v-if="jsList.length == 0 && num == 2" class="kong-box">
			<uv-empty mode="" text="暂时没有收藏的技师~" icon="/static/image/kong-js.png"></uv-empty>
		</view>
		
		<view class="content-box">
			<view v-if="num == 1 && fwList.length != 0" class="public-box m-t24">
				<view class="goods-box">
					<view class="goods border-b" v-for="item in fwList">
						<view class="img-box">
							<image class="img" :src="item.tAppServiceVo.serviceImage" mode=""></image>
						</view>
						<view class="goods-font" @click="toservice(item.tAppServiceVo.id)">
							<view class="start-top">
								<h1 class="goods-h1 start-h1">{{item.tAppServiceVo.serviceName}}</h1>
								<image @click.stop="startBox(item.id,item.version,item.isOn)" class="goods-start" src="/static/image/start-choose.png" mode=""></image>
							</view>
							<view class="sale">销量{{item.tAppServiceVo.serviceBaseTime}}</view>
							<view class="font-bottom">
								<view class="font-bottom-l">
									<view class="red">
										<span class="goods-span-red">¥</span>{{item.tAppServiceVo.serviceAmount}}
									</view>
									<view class="grey">¥{{item.tAppServiceVo.serviceOldAmount}}</view>
								</view>
								<!-- <view class="but-blue t-but">立即预约</view> -->
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view v-if="num == 2 && jsList.length != 0" class="public-box js m-t24">
				<view class="list-box" v-for="item in jsList" @click="goStaffDetailSign(item.tAppStaffVo.id)">
					<view class="">
						<!-- <uv-icon size="22" name="/static/image/t-vip1.png" class="m-b8 t-vip"></uv-icon> -->
						<view class="list-head">
							<view class="img-box">
								<image class="image" :src="item.tAppStaffVo.staffCover" mode="widthFix"></image>
							</view>
							<!-- <view class="title">优秀技师</view> -->
						</view>
					</view>
					<view style="width:calc(100% - 184rpx)">
						<view class="list-center-top m-b30 m-t16">
							<view class="list-center">
								<h1 class="list-center-h1">{{item.tAppStaffVo.staffName}}</h1>
								<!-- <view class="time">
									<view class="time-b-red">最早可约</view>
									<view class="time-f-red">19:00</view>
								</view> -->
							</view>
							
							<view>
								<view @click.stop="startBox2(item.id,item.version,item.isOn)" class="icon-font m-b8">
									<uv-icon size="16" name="/static/image/start-choose.png" style="margin-right: 8rpx;"></uv-icon>
									<view class="shop">收藏</view>
								</view>
								<!-- <view class="icon-font m-b8">
									<uv-icon size="16" name="/static/image/t-address.png" style="margin-right: 8rpx;"></uv-icon>
									<view class="shop">小于1km</view>
								</view> -->
							</view>
						</view>
						
						<view class="list-bottom-box">
							<view class="list-bottom">
								<view class="font" style="margin-bottom: 8rpx;">
									<span class="list-span">{{item.tAppStaffVo.score}}分</span>服务单数 {{item.tAppStaffVo.orderCount}}
								</view>
								<view class="font font-flex">
									<uv-icon size="16" name="/static/image/t-shop.png" style="margin-right: 8rpx;"></uv-icon>
									<view class="shop">{{item.tAppStaffVo.tAppSupplierVo ? item.tAppStaffVo.tAppSupplierVo.supplierName : ""}}</view>
								</view>
							</view>
							<!-- <view class="but-blue t-but">立即预约</view> -->
						</view>
					</view>
				</view>
				
				<!-- ----------------- -->
			</view>
		</view>
	</view> 
</template> 

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	export default {
		data() {
			return {
				userInfo:uni.getStorageSync('userInfo'),
				backTitle:"我的收藏",
				num:1,
				fwList:[],
				jsList:[],
			}
		},
		components: { TopHeigth },
		onLoad() {
			this.list1()
			this.list2()
		},
		methods: {
			goStaffDetailSign(id){
				uni.navigateTo({
					url: "/pages/technician/detail?isparent=1&id="+id
				})
			},
			toservice(serviceId){
				uni.navigateTo({
					url: "/pages/order/goodsDetail?id=" + serviceId
				})
			},
			list1:function(){
				checkLogin(() => {
					uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/queryTAppUserCollect',{
						appUserId:this.userInfo.id,
						collectType:2, //1技师 2服务
						//staffServiceId:"" //技师服务id
					}).then((res) => {
						this.fwList = res.aaData
						
					})
				})
			},
			list2:function(){
				checkLogin(() => {
					uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/queryTAppUserCollect',{
						appUserId:this.userInfo.id,
						collectType:1, //1技师 2服务
						//staffServiceId:"" //技师服务id
					}).then((res) => {
						this.jsList = res.aaData
						
					})
				})
			},
			
			startBox:function(listId,version,isOn){
				uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
					//id:listId,
					version:version,
					isOn:1,
					id:listId //技师服务id
				}).then((res) => {
					uni.showToast({
						icon: "none",
						title: res.message
					})
					if(res.code == 200){
						this.list1()
					}
				})
			},
			startBox2(listId,version,isOn){
				uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
					id:listId,
					version:version,
					isOn:isOn,
					//staffServiceId:"" //技师服务id
				}).then((res) => {
					uni.showToast({
						icon: "none",
						title: res.message
					})
					if(res.code == 200){
						this.list2()
					}
				})
			},
			
			titleChange(n){
				this.num = n
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.js{
		padding-bottom: 0;
		.list-box{
			border-radius: 0;
			border-bottom: 2rpx solid #e8e8e8;
		}
		.list-box:last-child{
			border-bottom: none
		}
	}
	
	.time-top{
		@include flex;
		align-content: space-between;
		width: 100%;
		padding-top: 20rpx;
		.title-font{
			font-size:28rpx;
			color: #333;
			text-align: center;
			padding-bottom: 16rpx;
			margin-right: 56rpx;
		}
		.choose{
			font-weight: bold;
			background: url("/static/image/title-line.png") no-repeat bottom center;
		}
	}
	.start-top{
		width: 100%;
		@include flex;
		align-items: center;
		align-content: space-between;
	}
	.start-h1{
		width: calc(100% - 32rpx);
	}
	.goods-start{
		width: 32rpx;
		height: 32rpx;
	}
	
	
	/* 222222 */
	.list-center-h1{
		margin-bottom: 0 ;
	}
	.list-bottom{
		width: 100%;
	}
</style>
